
function canvasTxt() {
  (function (main) {
    var args = {};
    window.onload = function () {
      main(args);
    };
  })(function (args) {
    "use strict";
    var Box = function (x, y, w, h, s) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      this.s = s;
      this.a = Math.random() * Math.PI * 2;
      this.hue = Math.random() * 1000;
    };

    Box.prototype = {
      constructor: Box,
      update: function () {
        this.a += Math.random() * 0.5 - 0.25;
        this.x += Math.cos(this.a) * this.s;
        this.y += Math.sin(this.a) * this.s;
        this.hue += 100000;
        if (this.x > WIDTH) this.x = 0;
        else if (this.x < 0) this.x = WIDTH;
        if (this.y > HEIGHT) this.y = 0;
        else if (this.y < 0) this.y = HEIGHT;
      },
      render: function (ctx) {
        ctx.save();
        ctx.fillStyle = "hsla(" + this.hue + ", 100%, 50%,1)";
        ctx.translate(this.x, this.y);
        ctx.rotate(this.a);
        ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);
        ctx.restore();
      }
    };

    var Circle = function (x, y, tx, ty, r) {
      this.x = x;
      this.y = y;
      this.ox = x;
      this.oy = y;
      this.tx = tx;
      this.ty = ty;
      this.lx = x;
      this.ly = y;
      this.r = r;
      this.br = r;
      this.a = Math.random() * Math.PI * 2;
      this.sx = Math.random() * 0.5;
      this.sy = Math.random() * 0.5;
      this.o = Math.random() * 1;
      this.delay = Math.random() ;
      this.delayCtr = 0;
      this.hue = Math.random() ;
    };

    Circle.prototype = {
      constructor: Circle,
      update: function () {
        if (this.delayCtr < this.delay) {
          this.delayCtr++;
          return;
        }
        this.hue;
        this.a;
        this.lx = this.x;
        this.ly = this.y;

        if (!clickToggle) {
          this.x += (this.tx - this.x) * Math.random() * 0.3;
          this.y += (this.ty - this.y) * Math.random() * 0.3;
        } else {
          this.x += (this.ox - this.x) * this.sx;
          this.y += (this.oy - this.y) * this.sy;
        }

        this.r = this.br;
      },
      render: function (ctx) {
        ctx.save();
        ctx.globalAlpha = this.o;
        ctx.fillStyle = "rgba(255,255,255,1)";
        ctx.translate(this.x, this.y);
        ctx.beginPath();
        ctx.arc(0, 0, this.r, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();

        if (clickToggle) {
          ctx.save();
          ctx.strokeStyle = "rgba(255,255,255,1)";
          ctx.beginPath();
          ctx.moveTo(this.lx, this.ly);
          ctx.lineTo(this.x, this.y);
          ctx.stroke();
          ctx.restore();
        }
      }
    };

    var txtCanvas = document.createElement("canvas");
    var txtCtx = txtCanvas.getContext("2d");

    var c = document.getElementById("txt");
    var ctx = c.getContext("2d");

    var WIDTH = (c.width = window.innerWidth);
    var HEIGHT = (c.height = window.innerHeight);
    var imgData = null;
    var idx = null;
    var skip = 4;
    var circles = [];
    var circle = null;
    var a = null;
    var clickToggle = false;
    var boxList = [];
    var box = null;

    txtCanvas.width = WIDTH;
    txtCanvas.height = HEIGHT;

    txtCtx.font = "bold 140px Sans-serif";
    txtCtx.textAlign = "center";
    txtCtx.baseline = "middle";
    txtCtx.fillText("中国医药物联网", WIDTH / 2, HEIGHT / 2);

    ctx.font = "bold 30px Monospace";
    ctx.textAlign = "center";
    ctx.baseline = "middle";

    imgData = txtCtx.getImageData(0, 0, WIDTH, HEIGHT).data;

    for (var y = 0; y < HEIGHT; y += skip) {
      for (var x = 0; x < WIDTH; x += skip) {
        idx = (x + y * WIDTH) * 4 - 1;
        if (imgData[idx] > 0) {
          a = Math.PI * 2 * Math.random();
          circle = new Circle(
            WIDTH / 2 + Math.cos(a) * WIDTH,
            HEIGHT / 2 + Math.sin(a) * WIDTH,
            x,
            y,
            Math.random() * 4
          );
          circles.push(circle);
        }
      }
    }

    for (var b = 0; b < 10; b++) {
      box = new Box(
        WIDTH * Math.random(),
        HEIGHT * Math.random(),
        5,
        2,
        5 + Math.random() * 5
      );
      boxList.push(box);
    }

    c.addEventListener("click", function (e) {
      clearTimeout(timer2);
      clickToggle = !clickToggle;
      times(1500);
      
    });

    var timer1,timer2;
    function times(e) {
      timer1=setTimeout(function () {
        document.getElementById('logins').style.display = 'block';
        document.getElementById('txt').style.display = 'none';
        document.getElementById('china').style.display = 'block';
      }, e)
    }
   
    timer2=setTimeout(function(){
      clickToggle = !clickToggle;
      setTimeout(function () {
        document.getElementById('logins').style.display = 'block';
        document.getElementById('txt').style.display = 'none';
        document.getElementById('china').style.display = 'block';
      }, 1000)
    },3000)


    requestAnimationFrame(function loop() {
      requestAnimationFrame(loop);

      ctx.globalCompositeOperation = "source-over";
      ctx.fillStyle = "#000a14";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);

      ctx.fillStyle = "#000a14";
      ctx.fillText("", WIDTH / 2, HEIGHT / 2 + 100);

      ctx.globalCompositeOperation = "lighter";

      for (var i = 0, len = circles.length; i < len; i++) {
        circle = circles[i];
        circle.update();
        circle.render(ctx);
      }

      for (var j = 0; j < boxList.length; j++) {
        box = boxList[j];
        box.update();
        box.render(ctx);
      }
    });
  });
}


function loginBj() {
  window.requestAnimFrame = (function () { return window.requestAnimationFrame })();
  var canvas = document.getElementById("loginBj");
  var c = canvas.getContext("2d");

  var numStars = 1900;
  var radius = '0.' + Math.floor(Math.random() * 9) + 1;
  var focalLength = canvas.width * 2;
  var warp = 0;
  var centerX, centerY;

  var stars = [], star;
  var i;

  var animate = true;

  initializeStars();

  function executeFrame() {

    if (animate)
      requestAnimFrame(executeFrame);
    moveStars();
    drawStars();
  }

  function initializeStars() {
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;

    stars = [];
    for (i = 0; i < numStars; i++) {
      star = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        z: Math.random() * canvas.width,
        o: '0.' + Math.floor(Math.random() * 99) + 1
      };
      stars.push(star);
    }
  }

  function moveStars() {
    for (i = 0; i < numStars; i++) {
      star = stars[i];
      star.z--;

      if (star.z <= 0) {
        star.z = canvas.width;
      }
    }
  }

  function drawStars() {
    var pixelX, pixelY, pixelRadius;

    // Resize to the screen
    if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      initializeStars();
    }
    if (warp == 0) {
      c.fillStyle = "rgba(0,10,20,1)";
      c.fillRect(0, 0, canvas.width, canvas.height);
    }
    c.fillStyle = "rgba(209, 255, 255, " + radius + ")";
    for (i = 0; i < numStars; i++) {
      star = stars[i];

      pixelX = (star.x - centerX) * (focalLength / star.z);
      pixelX += centerX;
      pixelY = (star.y - centerY) * (focalLength / star.z);
      pixelY += centerY;
      pixelRadius = 1 * (focalLength / star.z);

      c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
      c.fillStyle = "rgba(209, 255, 255, " + star.o + ")";
      //c.fill();
    }
  }
  executeFrame();
}
export { canvasTxt, loginBj }